<template>
    <div>
        <a-card :title="this.title">
            <a-form :form="form">
                <a-form-item
                        label="名称"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                        has-feedback
                >
                    <a-input
                            allowClear
                            v-decorator="['name', {
                                initialValue: this.editData && this.editData.name,
                                rules: [{ required: true, message: '请输入名称！' }]
                            }]"
                    />
                </a-form-item>

                <a-form-item
                        label="标识"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-input
                            v-decorator="['tag',{
                                initialValue: this.editData && this.editData.tag,
                            }]"
                            allowClear
                    />
                </a-form-item>

                <a-form-item
                        label="url"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-input
                            v-decorator="['url',{
                                initialValue: this.editData && this.editData.url,
                            }]"
                            allowClear
                    />
                </a-form-item>

                <a-form-item
                        label="前置图标"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-input
                            v-decorator="['icon',{
                                initialValue: this.editData && this.editData.icon,
                            }]"
                            allowClear
                    />
                </a-form-item>

                <a-form-item
                        label="是否启用"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-radio-group
                            v-decorator="['enabled',{
                                initialValue: this.editData?this.editData.enabled+'':'1',
                            }]"
                    >
                        <a-radio value="1">
                            是
                        </a-radio>
                        <a-radio value="0">
                            否
                        </a-radio>
                    </a-radio-group>
                </a-form-item>

                <a-form-item
                        label="排序序号"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-input-number
                            v-decorator="['orderNo',{
                                    initialValue: this.editData && this.editData.orderNo,
                                    rules: [{ required: true, message: '请输入序号！' }]
                                }]"
                    />
                </a-form-item>

                <a-form-item
                        label="描述"
                        :label-col="{span:8}"
                        :wrapper-col="{span:12}"
                >
                    <a-textarea
                            v-decorator="['description',{
                                initialValue: this.editData && this.editData.description,
                            }]"
                            :auto-size="{ minRows: 3, maxRows: 5 }"
                    />
                </a-form-item>
                <a-form-item
                        :wrapper-col="{span:12,offset:12}"
                >
                    <a-space align="center" size="large">
                        <a-button
                                type="primary"
                                @click="handleSubmit"
                        >
                            确定
                        </a-button>
                        <a-button
                                type="danger"
                                @click="form.resetFields()"
                        >
                            清空
                        </a-button>
                    </a-space>

                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>

<script>
  import {mapActions, mapMutations, mapState} from 'vuex'
  import {filter} from 'lodash'

  export default {
    name: "MenuManageBody",
    data() {
      return {
        form: this.$form.createForm(this),
      }
    },
    computed: {
      ...mapState('menuManage', ['title', 'currentKey', 'editData', 'allTreeData']),
    },
    methods: {
      ...mapMutations('menuManage', ['setState']),
      ...mapActions('menuManage', ['saveMenu']),
      handleSubmit() {
        this.form.validateFields((err, values) => {
          if (!err) {
            let url = this.title == '添加' ? 'addSysMenu' : 'updateSysMenu/' + this.currentKey
            if (url == 'addSysMenu') {
              if (this.currentKey && this.currentKey != '菜单') {
                filter(this.allTreeData, {objectId: this.currentKey}).map((value) => {
                  if (value.parentId) {
                    values = {...values, parentId: value.parentId}
                  } else {
                    values = {...values, parentId: this.currentKey}
                  }
                })
              }
            }
            this.setState({name: 'spinning', value: true})
            this.saveMenu({values, url})
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>